Pre-coded Layouts

Main//Content

These layouts are pre-coded,it means you can get the code out of the box below the image and just paste it onto your freewebs or other HTML-based page and all will be already fixed ;)
Please copy the CSS out of the entire code and paste it to your very own CSS-page...

If you use Piczo,please download the Piczo-Package, un-zip it (using winRAR or 7zip), arrange the different images on your page as you like it and paste the CSS into a HTML-box

Please tell me,if you took any of these and if you liked them =)

Robert Pattinson

preview

Code for freewebs & any other hosted sites:

<HTML><HEAD><TITLE>Robert Pattinson *</TITLE></HEAD>
<BODY>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<h1>Welcome</h1><br>
<h4>Here you can place a welcome-text to all your visitors...<br><br>

This is how several text-effects will look:<br>
<b>bold</b>, <i>italic</i>, <u>underlined</u>, <a href="http://www.xxx.com">links</a><br><br>
CSS-Code: h1 is for navigation-headers on the left side<br>
h5 is for blog's headers<br>
h2 is for headers on the different pages like content etc.<br>
h3 is a little semi-header<br>
h4 is for normal text<br>
<b>PLEASE MIND THEM!!!</b></h4>

</div>

<div style="/*absolute positioning is not allowed.*/ width:174px; x-index:0; left: 66px; top: 895px;">
<h1>Navigation</h1><br>
<a href="URL" class="box" target="frame1">Page Name</a>
<a href="URL" class="box" target="frame1">Page Name</a>
<a href="URL" class="box" target="frame1">Page Name</a>
<a href="URL" class="box" target="frame1">Page Name</a><br><br>

<h1>Owner</h1><br>
<h4>The section with short information about you...</h4><br><br>

<h1>Affiliates</h1><br>
<center><a href="http://www.affiadresse.com" target="_blank"><img src="http://img223.imageshack.us/img223/3465/pattinsonaffiifz0.png" border="0pt"></a>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img223.imageshack.us/img223/7066/pattinsonaffiiike4.png" border="0pt"></a>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img223.imageshack.us/img223/3465/pattinsonaffiifz0.png" border="0pt"></a>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img223.imageshack.us/img223/7066/pattinsonaffiiike4.png" border="0pt"></a><br>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img223.imageshack.us/img223/7066/pattinsonaffiiike4.png" border="0pt"></a>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img223.imageshack.us/img223/3465/pattinsonaffiifz0.png" border="0pt"></a>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img223.imageshack.us/img223/7066/pattinsonaffiiike4.png" border="0pt"></a>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img223.imageshack.us/img223/3465/pattinsonaffiifz0.png" border="0pt"></a></center><br><br>

<h1>Site Infos</h1><br>
<h4>Here you can place information about your site like the host or the site stats...</h4><br><br>

<h1>Designer</h1><br>

<h4>This layout was designed by Wiebke,the owner of <a href="http://www.--honestly.piczo.com" target="_blank">--honestly.piczo.com</a><br><br><br><br></h4></div>

<div style="/*absolute positioning is not allowed.*/ width:450px; x-index:0; left: 270px; top: 730px;">
<h5>Here goes your I-Frame</h5><br>
<h4>Header examples</h4><br>
<div style="/*absolute positioning is not allowed.*/ width:200px; x-index:0; left: 20px; top: 75px;">
<h1>Header 1 [h1]</h1><br>
<h2>Header 2 [h2]</h2><br>
<h3>Header 3 [h3]</h3><br>
<h4>Header 4 [h4]</h4><br>
<h5>Header 5 [h5]</h5></div> </div>

<style type="text/css">

body, div, p {
	font-family: times new roman;
	font-size: 9pt;
	line-height: 9pt;
	color: #000000;
	margin: 0;
	padding: 0;

scrollbar-face-color:#808080;
scrollbar-highlight-color:#808080;
scrollbar-3dlight-color:#808080;
scrollbar-shadow-color:#808080;
scrollbar-darkshadow-color:#808080;
scrollbar-track-color:#808080;
scrollbar-arrow-color:#fff;
}

.entrytext{
font-weight: normal;
}

li {
list-style-image:url(http://img249.imageshack.us/img249/6971/ttttttttttnf9.gif);
margin-bottom: 0px; margin-top: 0px; margin-right: 2px; margin-left: 0px;
}

u {
	color: #000000;
	font-family: times new roman;
	font-size: 9pt;
	font-weight: ;
	text-align: justify;
	border-bottom: 1px dashed #087685;
}

b {
	COLOR: #4d4d4d; font-family: times new roman ;FONT-SIZE: 10pt; 
}

h1 {
cursor:default; 
background-color: ; 
font-size:11pt; 
font-family: Times New Roman; 
letter-spacing:1px; 
line-height:12pt; 
color: #ffffff;
text-align: right;
padding: 1px;
text-transform: ;
border-bottom: 3px dotted #7E7F7E;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
}

h2 {
cursor:default; 
background-image: url(http://img504.imageshack.us/img504/43/5n7uwisy4.jpg);
background-color: ; 
font-size:10pt; 
font-family:arial; 
letter-spacing:0px; 
line-height:10pt; 
color: #c50c58;
padding: 3px;
font-weight: bold; 
text-transform: none;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
}

h3 {
cursor:default;

font-size:8pt; 
font-family: arial; 
letter-spacing:1px; 
line-height:9pt; 
color: #000000;
padding: 5px;
font-weight: normal; 
text-transform: none;
border-bottom: 1px dotted #000000;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
}

h4 {
cursor:default; 
background-color: ; 
font-size:7pt; 
font-family: arial; 
letter-spacing:0px; 
line-height:8pt; 
color: #000000;
padding: 2px;
font-weight: normal; 
text-transform: ;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
}

h5 {
cursor:default; 
background-color: ; 
font-size:11pt; 
font-family:times new roman; 
letter-spacing:1px; 
line-height:12pt; 
color: #ffffff;
padding: 1px;
border-bottom: 3px dotted #cacaca;
text-transform: none;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
}

blockquote {
cursor:default; 
background-color: #505050; 
font-size:7pt; 
width: 270px;
text-align: left;
font-family:arial; 
letter-spacing:0px; 
line-height:8pt; 
color: #000000;
border: 1px solid #000000;
padding: 1px;
font-weight: normal; 
text-transform: none;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
}
.special {
	font-family: Tahoma;
	font-size: 7pt;
	color: #293763;
	font-weight: bold;
	line-height: 7pt;
}

a:link {
	text-decoration: none;
	font-family: times new roman;
	font-weight:normal;
	font-size: 9px;
	line-height: 9px;
	color: #087685;
	letter-spacing:0px;
	text-align: justify;
}

a:visited {
	text-decoration: none;
	font-family: courier new;
	font-weight:normal;
	font-size:8px;
	line-height:9px;
	color: #000000;
	letter-spacing:0px;
	text-align: justify;

}

a:hover {
	text-decoration: none;
	color: #ffffff;
	border-bottom: 1px dotted #4d4d4d;
}

a.nav, a.nav:link, a.nav:active, a.nav:visited {
text-decoration: none;
font-family: verdana;
font-weight:normal;
font-size:9px;
line-height:13px;
color: #ffffff;
padding: 1px;
display:block;
letter-spacing:0px;
border-bottom: 1px solid #505050;
border-left: 0px solid #000000;
padding: 0px;
text-align: left;
background: #606060;
text-transform: none;
}
a.nav:hover {
text-decoration: none;
font-family: verdana;
font-weight:bold;
font-size:9px;
line-height:13px;
color: #000;
border-bottom: 1px solid #ffffff;
border-left: 0px solid #000000;
background: #808080;
letter-spacing:0px;
display:block;
text-transform: none;
text-align: left;
}
input, select {
	color: #FE7785;
	background: #ffffff;
	font-size: 7pt;
	font-weight: normal;
	font-weight: bold;
	text-decoration: none;
	font-family: Tahoma; 
	text-align: center;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}
TEXTAREA {
	color: #000000;
        height: 40px;
        width: 100px;
        text-transform: uppercase;
	background: #4d4d4d;
	font-size: 7pt;
	font-weight: normal;
	text-decoration: none;
	font-family: arial narrow; 
	text-align: center;
	border-width: 1px;
	border-style: dotted;
	border-color: #000000;
}

a.box, a.box:link, a.box:active, a.box:visited {
text-decoration: none;
font-family: arial;
font-weight:normal;
font-size:10px;
line-height:13px;
color: #ffffff;
padding: 1px;
display:block;
letter-spacing:0px;
border-bottom: 1px solid #087685;
border-left: 0px solid #707070;
padding: 0px;
text-align: left;
text-transform: none;
}
a.box:hover {
text-decoration: none;
font-family: arial;
font-weight:bold;
font-size:10px;
line-height:13px;
color: #c50c58;
border-bottom: 1px solid #000000;
border-left: 0px solid #808080;
letter-spacing:0px;
display:block;
text-transform: none;
text-align: left;

</style>

</noscript></body>
</html>
</BODY></HTML>

Download for Piczo's:

Please note: This Layout has the tag "strappleberry" on it,but it is made by me,strappleberry was an old site of mine =)

Edward & Bella

preview

Code for freewebs & any other hosted sites:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<h1>Welcome</h1><br>
<h4>Here you can place a welcome-text to all your visitors...<br><br>

<h1>Navigation</h1><br>
<a href="URL" class="box" target="frame1">Page Name</a>
<a href="URL" class="box" target="frame1">Page Name</a>
<a href="URL" class="box" target="frame1">Page Name</a>
<a href="URL" class="box" target="frame1">Page Name</a><br><br>

<h1>Owner</h1><br>
<h4>The section with short information about you...</h4><br><br>

<h1>Affiliates</h1><br>
<center><a href="http://www.affiadresse.com" target="_blank"><img src="http://img502.imageshack.us/img502/5512/affi1.png" border="0pt" width="20"></a>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img502.imageshack.us/img502/3654/affi2.png" border="0pt" width="20"></a>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img502.imageshack.us/img502/5512/affi1.png" border="0pt" width="20"></a>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img502.imageshack.us/img502/3654/affi2.png" border="0pt" width="20"></a><br>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img502.imageshack.us/img502/3654/affi2.png" border="0pt" width="20"></a>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img502.imageshack.us/img502/5512/affi1.png" border="0pt" width="20"></a>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img502.imageshack.us/img502/3654/affi2.png" border="0pt" width="20"></a>
<a href="http://www.affiadresse.com" target="_blank"><img src="http://img502.imageshack.us/img502/5512/affi1.png" border="0pt" width="20"></a></center><br><br>

<h1>Site Infos</h1><br>
<h4>Here you can place information about your site like the host or the site stats...</h4><br><br>

<h1>Designer</h1><br>

<h4>This layout was designed by Wiebke,the owner of <a href="http://www.--honestly.piczo.com" target="_blank">--honestly</a><br><br><br><br></h4></div>

<div style="/*absolute positioning is not allowed.*/ width:380px; x-index:0; left: 251px; top: 670px;">
<h5>Here goes your I-Frame</h5><br>
<h4>Header examples</h4><br>
<div style="/*absolute positioning is not allowed.*/ width:200px; x-index:0; left: 20px; top: 75px;">
<h1>Header 1 [h1]</h1><br>
<h2>Header 2 [h2]</h2><br>
<h3>Header 3 [h3]</h3><br>
<h4>Header 4 [h4]</h4><br>
<h5>Header 5 [h5]</h5></div> </div>

<style type="text/css">

body, div, p {
	font-family: tahoma;
	font-size: 9pt;
	line-height: 9pt;
	color: #000000;
	margin: 0;
	padding: 0;

.entrytext{
font-weight: normal;
}

li {
list-style-image:url(http://img249.imageshack.us/img249/6971/ttttttttttnf9.gif);
margin-bottom: 0px; margin-top: 0px; margin-right: 2px; margin-left: 0px;
}

u {
	color: #000000;
	font-family: times new roman;
	font-size: 9pt;
	font-weight: ;
	text-align: justify;
	border-bottom: 1px dashed #c4c4c4;
}

b {
	COLOR: #4d4d4d; font-family: tahoma ;FONT-SIZE: 10pt; 
}

h1 {
cursor:default; 
background-color: ; 
font-size:11pt; 
font-family: Courir New; 
letter-spacing:1px; 
line-height:12pt; 
color: #ffffff;
text-align: right;
padding: 1px;
text-transform: ;
border-bottom: 3px groove #7E7F7E;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
}

h2 {
cursor:default;

background-color: ; 
font-size:10pt; 
font-family: tahoma; 
letter-spacing:0px; 
line-height:10pt; 
color: #a9a9a9;
padding: 3px;
font-weight: bold; 
text-transform: none;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
border-bottom: 2px double #7E7F7E;
}

h3 {
cursor:default;

font-size:8pt; 
font-family: tahoma; 
letter-spacing:1px; 
line-height:9pt; 
color: #000000;
padding: 5px;
font-weight: normal; 
text-transform: none;
border-bottom: 1px dotted #000000;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
}

h4 {
cursor:default; 
background-color: ; 
font-size:7pt; 
font-family: tahoma; 
letter-spacing:0px; 
line-height:8pt; 
color: #000000;
padding: 2px;
font-weight: normal; 
text-transform: ;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
}

h5 {
cursor:default; 
background-color: ; 
font-size:11pt; 
font-family:courir new; 
letter-spacing:1px; 
line-height:12pt; 
color: #ffffff;
padding: 1px;
border-bottom: 3px ridge #000000;
text-transform: none;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;
}

a:link {
	text-decoration: none;
	font-family: tahoma;
	font-weight:normal;
	font-size: 9px;
	line-height: 9px;
	color: #ffffff;
	letter-spacing:0px;
	text-align: justify;
}

a:visited {
	text-decoration: none;
	font-family: courier new;
	font-weight:normal;
	font-size:8px;
	line-height:9px;
	color: #000000;
	letter-spacing:0px;
	text-align: justify;

}

a:hover {
	text-decoration: none;
	color: #ffffff;
	border-bottom: 1px double #4d4d4d;
}

a.nav, a.nav:link, a.nav:active, a.nav:visited {
text-decoration: none;
font-family: verdana;
font-weight:normal;
font-size:9px;
line-height:13px;
color: #ffffff;
padding: 1px;
display:block;
letter-spacing:0px;
border-bottom: 1px solid #505050;
border-left: 0px solid #000000;
padding: 0px;
text-align: left;
background: #606060;
text-transform: none;
}
a.nav:hover {
text-decoration: none;
font-family: verdana;
font-weight:bold;
font-size:9px;
line-height:13px;
color: #000;
border-bottom: 1px solid #ffffff;
border-left: 0px solid #000000;
background: #808080;
letter-spacing:0px;
display:block;
text-transform: none;
text-align: left;
}
input, select {
	color: #FE7785;
	background: #ffffff;
	font-size: 7pt;
	font-weight: normal;
	font-weight: bold;
	text-decoration: none;
	font-family: Tahoma; 
	text-align: center;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}
textarea {
	color: #000000;
        height: 40px;
        width: 100px;
        text-transform: uppercase;
	background: #ffffff;
	font-size: 7pt;
	font-weight: normal;
	text-decoration: none;
	font-family: tahoma; 
	text-align: center;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}

a.box, a.box:link, a.box:active, a.box:visited {
text-decoration: none;
font-family: arial;
font-weight:normal;
font-size:10px;
line-height:20px;
color: #ffffff;
padding: 1px;
display:block;
letter-spacing:0px;
border-bottom: 1px double #000000;
border-left: 0px solid #707070;
padding: 0px;
text-align: right;
text-transform: none;
}
a.box:hover {
text-decoration: none;
font-family: arial;
font-weight:bold;
font-size:10px;
line-height:20px;
color: #4d4d4d;
background-image: url(http://img502.imageshack.us/img502/4231/hgmenu.png);
border-bottom: 1px solid #000000;
border-left: 0px solid #808080;
letter-spacing:0px;
display:block;
text-transform: none;
text-align: left;

</style>

</noscript></body>
</html>
</BODY></HTML>

Download for Piczo's: